<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- <script src="functional.js"></script> -->
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box1 {
        background-color: red;
        margin-right: 100px;
      }
      .box2 {
        background-color: green;
        margin-left: 100px;
      }
      .demo1 {
        background-color: red;
        margin-bottom: 100px;
      }
      .demo2 {
        background-color: green;
        /* 会被合并 */
        margin-top: 100px;
      }
      /*  */
      .nav li {
        border-right: 1px solid #666;
      }
      .nav li:last-child {
        border-right: none;
      }
      /* 使用：not() */
      .nav li:not(:last-child) {
        border-right: 1px solid #666;
      }
      /* 当然，如果你的新元素有兄弟元素的话，也可以使用通用的兄弟选择符（~） */
      .nav li:first-child ~ li {
        border-left: 1px solid #666;
      }
      /* 在CSS中使用负的 nth-child 选择项目1到项目n。 */
      li {
        display: none;
      }
      /* select items 1 through 3 and display them */
      li:nth-child(-n + 3) {
        display: block;
      }

      /* 逗号分隔列表 */
      ul > li:not(:last-child)::after {
        content: ',';
      }
      /* 对图标使用SVG */
      .logo {
        background: url('logo.svg');
      }
      /* 优化显示文本
      有时，字体并不能在所有设备上都达到最佳的显示，所以可以让设备浏览器来帮助你： */
      html {
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
      }
      /* 继承 box-sizing
        让 box-sizing 继承 html */
      html {
        box-sizing: border-box;
      }
      *, *::before, *::after {
        box-sizing: inherit;
      }
      
      /* 使用属性选择器用于空链接 */
      a[href^="http"]:empty::before {
        content: attr(href);
      }
      
      /* ...展示 */
      p {
        width: 300px;
        height: 20px;
        line-height: 20px;
        /* 首先让文本失去换行功能 */
        white-space: nowrap;
        /* 再溢出部分隐藏 */
        overflow: hidden;
        /* 最后把溢出部分打点 */
        text-overflow: ellipsis;
      }
      
      /*  */
      a {
        display: inline-block;
        text-decoration: none;
        color: #424242;
        width: 190px;
        height: 90px;
        border: 1px solid black;
        background-image: url();
        background-size: 190px 90px;
        /* 在图片加载空白时， 显示文字 */
        /* 首行缩进 缩进距离大于内容宽度 */
        text-indent: 200px;
        /* 强行文本不换行 */
        white-space: nowrap;
        /* 溢出部分隐藏 */
        overflow: hidden;
      }
      
    </style>
  </head>
  <body>
    <a href="http://www.taobao.com" target="_blank" id="">默认文字</a>
    <span class="box1">123</span>
    <span class="box2">456</span>
    <div class="demo1">1</div>
    <div class="demo2">1</div>
    <script>
      console.log(document.body.clientWidth);
    </script>
  </body>
</html>
